<script>
   import * as THREE from "three";
   // 场景
const scene = new THREE.Scene();
// 相机
const camera = new THREE.PerspectiveCamera(
   70,
  window.innerWidth / window.innerHeight,
  0.1,
  500
);
camera.position.set(0, 0, 5.5);

// 渲染器
let renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, 200);
renderer.setClearColor(0xffffff); //设置背景颜色
document.body.appendChild(renderer.domElement);

// 加载纹理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load("images/imgs/稻田_1.png");
const depthTexture = textureLoader.load("images/imgs/稻田.jpg");

// 创建平面
const geometry = new THREE.PlaneGeometry(19.2, 12);
// const material = new THREE.MeshBasicMaterial({ map: texture });
// 鼠标坐标
const mouse = new THREE.Vector2();

// 着色器材质
const material = new THREE.ShaderMaterial({
  uniforms: {
    //设置时间自动进行播放
    uTime: { value: 0 },
    uTexture: { value: texture },
    uDepthTexture: { value: depthTexture },
    uMouse: { value: mouse },
  },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform sampler2D uTexture;
    uniform sampler2D uDepthTexture;
    uniform vec2 uMouse;
    varying vec2 vUv;
    uniform float uTime;
    void main() {
      vec4 color = texture2D(uTexture, vUv);
      vec4 depth = texture2D(uDepthTexture, vUv);
      float depthValue = depth.r;

      float x = vUv.x + (uMouse.x+sin(uTime))*0.01*depthValue;
      float y = vUv.y + (uMouse.y+cos(uTime))*0.01*depthValue;
      vec4 newColor = texture2D(uTexture, vec2(x, y));
      gl_FragColor = newColor;
    }
  `,
});

const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

// 渲染
requestAnimationFrame(function animate() {
  material.uniforms.uMouse.value = mouse;
  material.uniforms.uTime.value = performance.now() / 2000;
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
});

window.addEventListener("mousemove", (event) => {
  mouse.x = (event.clientX / window.innerWidth)*2-1;
  mouse.y = -(event.clientY / 200) * 2 + 1;
});
export default{ 

  data(){
    return {
      
    }
  },
  methods:{
    init(){
    }
  },
  mounted(){
    this.init()
  },
  beforeDestroy(){
    try {
		scene.clear();
		renderer.dispose();
		renderer.forceContextLoss();
		renderer.content = null;
		cancelAnimationFrame(animationID) // 去除animationFrame
		let gl = renderer.domElement.getContext("webgl");
		gl && gl.getExtension("WEBGL_lose_context").loseContext();
	}catch (e) {
		console.log(e)
	}
  }
 
}
</script>

<template>
  <div></div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

canvas {
  width:100vw;
  height: 210;
  display: block;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
}
</style>
